﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>API</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap/css/pub.css" rel="stylesheet" />
    <script src="../bootstrap/js/jquery.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../bootstrap/js/bootstrap-paginator.js"></script>
    <!--[if lt IE 9]>
        <script src="bootstrap/js/html5shiv.min.js"></script>
        <script src="bootstrap/js/respond.min.js"></script>
    <![endif]-->
    <script src="../config.js"></script>
    <script src="../bootstrap/js/Common.js"></script>
    <script src="../bootstrap/js/controls.js"></script>
    <script type="text/javascript">
        $(function () {
            init(1);
        });
        function init(pgindex) {
                //菜单
                var menus = [
                ];
                $(".menu-container").menu({ items: menus });
                //列表
                var columns = [
                    {
                        name: "编号", field: "id"
                    },
                    {
                        name: "数据类型", field: "type", formatter: function (value) {
                            if (value == 0) {
                                return "默认";
                            } else if (value == 1) {
                                return "开关";
                            } else if (value == 2) {
                                return "整型";
                            } else if (value == 3) {
                                return "浮点型";
                            } else if (value == 4) {
                                return "字符串";
                            } else if (value == 5) {
                                return "对象";
                            } else if (value == 6) {
                                return "数组";
                            }
                        }
                    },
                    { name: "描述", field: "description" }, {
                        name: "屏蔽状态", field: "state", formatter: function (value) {
                            if (value == 0) {
                                return "显示";
                            } else {
                                return "屏蔽";
                            }
                        }
                    },   
                    { name: "默认值", field: "defaultValue" },
                    {
                        name: "实时数据", field: "dataPointID", formatter: function (val) {
                            $.ajax({
                                url: cmd_url +"variable/"+ val,
                                type: "get",
                                success: function (data) {
                                    return data
                                },
                                error: function (request) {
                                    return 0;
                                }
                            });
                        }
                    },
                    {
                        name: "操作",
                        field: "dataPointID",
                        title: '操作',
                        formatter: function (value,dataRow) {
                            return '<a href="javascript:void(0);" onclick="openDataChart(\'' +
                                value +
                                '\',\'' +
                                dataRow.type+
                                '\',\'' +
                                dataRow.description +
                                '\')" class="btn btn-sm btn-info" ><i class="fa fa-trash-o"></i>查看历史数据</a>';
                        }
                    }
                ];
            var param = { filter: $("#search").val(), type: 1, pagesize: pagesize, pageindex: pgindex };
            $("#tab").datagrid({ columns: columns, dblclick: void (0) }).loadData(host_name + "varDeclares/list", "post", param, function () {
                $.ajax({
                    url: host_name + "varDeclares/count?filter=1",
                    type: "get",
                    success: function (data) {
                        if (data < 10) {
                            $("#example").hide();
                        }
                        else {
                            $("#example").show();
                            var totalcount = Math.ceil(data / pagesize);
                            $('#pageLimit').bootstrapPaginator({
                                currentPage: pgindex,
                                totalPages: totalcount,//总页数
                                numberOfPages: pagenum,//显示页数
                                size: "normal",
                                bootstrapMajorVersion: 3,
                                alignment: "right",
                                itemTexts: function (type, page, current) {
                                    switch (type) {
                                        case "first": return "首页";
                                        case "prev": return "上一页";
                                        case "next": return "下一页";
                                        case "last": return "末页";
                                        case "page": return page;
                                    }//默认显示的是第一页。
                                },
                                onPageClicked: function (event, originalEvent, type, page) {//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
                                    init(page);
                                }
                            });
                        }
                    }
                })
            });
        }
        //查看图表
        function openDataChart(val,type,desc)
        {
            var detype = "";
            var device = "";
            var des = desc == "" ? "" : desc.replace(new RegExp(/(，)/g), ',');
            var arr = des.split(',');
            for (var i = 0; i < arr.length; i++) {
                var strre = arr[i].replace(new RegExp(/(:)/g), '：');
                if (i==1) {
                    detype = arr[i];
                }
                if (new RegExp("资产编号：").test(arr[i])) {
                    var zc = strre.split('：');
                    if (zc.length > 1)
                        device = zc[1];
                }
            }
            if (device=="") {
                device = desc;
            }
            openModalWin("历史数据", "historydatachart.html?dataPointID=" + val + "&dtype=" + type + "&dtp=" + encodeURI(detype) + "&dev=" + encodeURI(device), refresh, 1200, 750, true);
        }
        //刷新
        function refresh() {
            $("#tab").datagrid().refresh();
        }
        //重置
        function reset() {
            document.getElementById("search").value = "";
            init(1);
        }
    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row" style="margin-bottom:10px">
            <div class="col-md-2">
                <h4>实时数据</h4>
            </div>
            <div class="col-md-10">
                <div class="menu-container pull-right">
                </div>
            </div>
        </div>
        <div class="row" style="margin-bottom:10px">
            <div class="col-md-4">
                <input type="text" id="search" value="" class="form-control input-xlarge" placeholder="输入描述搜索...">
            </div>
            <div class="col-md-8">
                <button class="btn btn-default" type="button" id="btnSearch" onclick="init(1)">搜索</button>
                <button class="btn btn-default" type="button" id="btnReset" onclick="reset()">重置</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 table-responsive">
                <table id="tab" class="table table-bordered table-hover"></table>
            </div>
        </div>
        <div class="row" style="margin-right: 10px;">
            <div id="example" style="text-align: right">
                <ul id="pageLimit"></ul>
            </div>
        </div>
    </div>
</body>
</html>
